<template>
    <div class="hot-main">
        <h3>热门服务</h3>
        <div class="hot-title">
            <li v-for="(item,type) in titleList" :key="type" :class="showType === item.type ? 'active-title' : '' " @click="changeContent(item.type)">
                {{item.name}}
            </li>
        </div>
        <div class="hot-page">
            <div class="hot-list" v-for="val of titleList" :key="val.type" v-show="val.type === activeType">
              <li v-for="item of val.listArr" :key="item.id">
                <p class="list-title"><img src="@/assets/img/u6.png" /><span>{{item.serviceName}}</span></p>
                <p class="list-desc">{{item.description}}</p>
                <div class="list-bottom">
                  <span>{{item.createTime}}</span>
                  <p class="list-bottom-icon">
                    <img @click="onSubscribe()" :src="img"/> 
                  </p>
                </div> 
              </li>
            </div>
        </div>
    </div>
</template>
<script>
import http from "@/utils/http.js"
export default {
    data(){
        return {
            showType:1,
            activeType:1,
            img:require("@/assets/img/order.svg"),
            titleList:[
                {
                    name:"最新API",
                    type:1,
                    listArr:[]
                },
                {
                    name:"热门API",
                    type:2,
                    listArr:[]
                },
                {
                    name:"最新应用",
                    type:3,
                    listArr:[]
                },
                {
                    name:"热门应用",
                    type:4,
                    listArr:[]
                }
            ],
        }
    },
    created(){
      this.initData(1)
      this.initData(2)
      this.initData(3)
      this.initData(4)
    },
    methods:{
        onSubscribe(){
            if(this.img === require("@/assets/img/order2.svg")){
                this.img=require("@/assets/img/order.svg")
            }else{
                this.img=require("@/assets/img/order2.svg")
            }
        },
        changeContent(type){
            this.showType=type
            this.activeType=type
            this.initData(type)
            console.log(this.activeType)
        },
        async initData(type){
          let list = []
          switch(type){
            case 1:
              list =await this.getLatestApi();
              break
            case 2:
              list =await this.getHotApi();
              break
            case 3:
              list =await this.getLatestApp();
              break
            case 4:
              list =await this.getHotApp();
              break
            default:
              break;
          }
          this.titleList[type-1]['listArr']=list
        },
        //最新API
        async getLatestApi(){
          const res = await http.getLatestApi();
          if(res.data){
            const listArr = res.data.data
            return listArr
          }
        },
        //热门API
        async getHotApi(){
          const res = await http.getHotApi();
          if(res.data){
            const listArr = res.data.data
            return listArr
          }
        },
        //最新应用
        async getLatestApp(){
          const res = await http.getLatestApp();
          if(res.data){
            const listArr = res.data.data.rows
            return listArr
          }
        },
        //热门应用
        async getHotApp(){
          const res = await http.getHotApp();
          console.log(res.data.data)
          if(res.data){
            const listArr = res.data.data.rows
            return listArr
          }
        }
    }
}
</script>
<style lang="scss" scoped>
.hot-main {
    background-color: #F4F4F4;
    width: 100%;
    h3 {
        padding-top: 50px;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        position: relative;
            &::after {
                position: absolute;
                width: 55px;
                height: 4px;
                background-color: #FFD33BFF;
                content: "";
                bottom: -18px;
                left: calc(50% - 25px);
    }
    }
}

  .hot-title {
    text-align: center;
    margin: 37px 0 30px 0;
    li {
      list-style: none;
      display: inline-block;
      padding: 5px 15px;
      width: 120px;
      border: 2px solid #8DA6FF;
      color: #1C4EFFFF;
      height: 36px;
      border-right: none;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 16px;
      &:last-child {
        border-right: 2px solid #8DA6FF;
      }
    }
    .active-title {
      background-color: #4862fe;
      color: #fff;
      border-color: #4862fe;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        width: 2px;
        right: -2px;
        top: -2px;
        height: 36px;
        background-color: #4862fe;
      }
    }
  }

.hot-page{
    width: 80%;
    min-width: 1200px
    ;margin: auto;
    padding-bottom: 50px;
    .hot-list {
    margin-top: 20px;
    color: #303133FF;
    li {
      width: 32%;
      display: inline-block;
      padding: 20px;
      box-shadow: 0px 0px 12px #00000010;
      background-color: #ffffff;
      border: 1px solid transparent;
      margin-right: 2%;
      margin-bottom: 25px;
      border-radius: 4px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .list-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        margin-bottom: 20px;
        color: #303133;
        img {
          width: 26px;
          height: 26px;
          margin-right: 15px;
        }
        span {
          white-space:nowrap;//不换行
          overflow: hidden;//超出隐藏
          text-overflow: ellipsis;//变成...
        }
      }
      .list-desc {
        padding: 5px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 16px;
        background-color: #f9f9f9;
        min-height: 58px;
        color: #303133;
        overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
      }
      .list-bottom {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .list-bottom-icon {
          display: flex;
          align-items: center;
          img {
            padding: 5px;
            width: 16px;
            height: 16px;
            cursor: pointer;
            margin-left: 5px;
            box-sizing: content-box;
          }
        }
      }
    }
  }
}
    
</style>